<template>
	<view>
		<uni-popup ref="commendRef" type="bottom" :maskClick="false">
			<view class="">
			<view class="body">
				<scroll-view class="scroll-area" scroll-y>
					
					<view class="tray_data" v-for="(item,index) in trayData" :key="item.fbillno">

						<!-- ✅ 自定义 checkbox -->
						<view class="check-container" @click="toggleCheck(item)">
							<view :class="['check-circle', item.checked ? 'checked' : '']"></view>
							<text class="check-label">选择</text>
						</view>

						<uni-forms>
							<uni-forms-item label="件号:" name="itemnumber">
								<input type="text" v-model="item.itemnumber" disabled />
							</uni-forms-item>

							<uni-forms-item label="托盘:" name="fbillno" v-if="item.fbillno">
								<input type="text" v-model="item.fbillno" disabled />
							</uni-forms-item>

							<uni-forms-item label="物料:" name="fmaterialname">
								<input type="text" v-model="item.fmaterialname" disabled />
							</uni-forms-item>

							<uni-forms-item label="批号:" name="flot">
								<input type="text" v-model="item.flot" disabled />
							</uni-forms-item>

							<uni-forms-item label="工单号:" name="foperpno" v-if="item.foperpno">
								<input type="text" v-model="item.foperpno" disabled />
							</uni-forms-item>

							<uni-forms-item label="仓位:" name="locationno" v-if="item.locationno">
								<input type="text" v-model="item.locationno" disabled />
							</uni-forms-item>

							<uni-forms-item label="数量:" name="fqty" style="width: 200px;">
								<uni-easyinput type="number" v-model="item.fqty" disabled />
							</uni-forms-item>
						</uni-forms>

					</view>

				</scroll-view>

				<view class="footerPanel">
					<view class="footerPanel_body">
						<button @click="closeInfoPop" class="footerBtn concle">取消</button>
						<button @click="savePickMaterial" class="footerBtn save">
							<i class="iconfont icon-duihao btn_icon"></i>提交
						</button>
					</view>
				</view>

			</view>
			</view>
		</uni-popup>

		<add-pick ref="pickRef"></add-pick>
	</view>
</template>


<script>
	import {updateStkTransferAppDetail,createTransferTemp}  from '@/utils/api.js'
	import AddPick from "@/pages/pop/add-pick-commend.vue"
	
	export default {
		components: { AddPick },
		data() {
			return {
				trayData:[],
				header : {}
			}
		},
		methods: {

			toggleCheck(item){
				item.checked = !item.checked
			},

			savePickMaterial(){
				const selectedList = this.trayData.filter(i => i.checked)

				if(selectedList.length === 0){
					return uni.showToast({
						title: '请选择要提交的数据',
						icon: 'none'
					})
				}

				uni.showModal({
					title:'提示',
					content:`确认添加选中的 ${selectedList.length} 条记录吗？`,
					success: (res) => {
						if(res.confirm){
							createTransferTemp({
								trayData: selectedList,
								headerId:this.header.fid
							}).then(result => {
								uni.showToast({title:'添加成功',icon:'none'})
								setTimeout(()=>{
									this.close()
									this.$emit('success', '')
								},800)
							})
						}
					}
				})
			},

			open(data){
				this.trayData = data.trayDataList.map(i => ({ ...i, checked: true }))
				this.header = data.header
				this.$refs.commendRef.open('center')
			},

			close(){
				this.$refs.commendRef.close()
			},

			closeInfoPop(){
				this.$refs.commendRef.close()
			},
		}
	}
</script>


<style lang="scss">
.body {
  background-color: aliceblue;
  width: 85vw;
  min-height: 60vh;
  padding-bottom: 70px;
  position: relative;

  /* ✅ 限制高度并允许滚动 */
  .scroll-area {
    max-height: 55vh; /* 或改为 calc(60vh - 70px) 动态计算 */
    overflow-y: auto;
    padding: 10px 0;
  }
}

	 
	.tray_data{
	  margin-top: 8px; /* 减小上边距 */
	  width: 100%;
	  
	  /* 调整表单项间距 */
	  ::v-deep .uni-forms-item {
	    margin-bottom: 8px !important; /* 减小行间距 */
	    min-height: 36px !important; /* 减小最小高度 */
	    
	    &__label {
	      font-size: 18px !important;
	      margin-bottom: 2px !important; /* 标签与输入框间距 */
	    }
	  }
	}
	
	.uni-forms-item {
	  align-items: flex-start !important; /* 顶部对齐 */
	  min-height: 36px; /* 设置统一高度 */
	}
	 
	/* 调整标签字体大小 */
	.tray_data ::v-deep .uni-forms-item__label {
		padding-left: 10px;
	  font-size: 22px !important;
	  color: #000000 !important;   /* 纯黑字体 */
	}
	 
	
	.tray_data ::v-deep .uni-forms-item input {
	  font-size: 22px !important;
	}
	 /* 特殊处理数量输入框 */
	 .tray_data ::v-deep .uni-easyinput {
		height: 50px;
	   font-size: 30px !important;
	   width: 120% !important; /* 保持原有输入框宽度 */
	 }
	 /* 调整标签组件样式 */
	 .tray_data ::v-deep .uni-tag {
	   font-size: 18px !important;
	   margin-left: 8px; /* 调整标签与文字间距 */
	 }
	 .uni-forms-item ::v-deep .uni-forms-item__label {
	   white-space: nowrap;  /* 禁止换行 */
	   min-width: 100px !important;  /* 设置最小宽度 */
	 }
	
	/* 底部按钮 - 修改布局 */
	.footerPanel {
	  position: absolute; /* 绝对定位 */
	  bottom: 30px;       /* 距离底部10px */
	  left: 0;
	  right: 0;
	  height: 60px;

	  .footerPanel_body {
	    display: flex;
	    justify-content: space-between; /* 左右分布按钮 */
	    width: 100%;
	    padding: 0 10px;
	    box-sizing: border-box;
	    
	    .footerBtn {
	      height: 50px;
	      min-width: 115px;
	      display: flex;
	      line-height: 1;
	      font-size: 18px; /* 适当增大字体 */
	      border-radius: 8px;
	      align-items: center;
	      justify-content: center;
	      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	      color: #fff;
	      border: none;
	      // margin: 0 10px;
	      
	      /* 取消按钮 - 左下角 */
	      &.concle {
	        background-color: #a0a0a0;
	        align-self: flex-start; /* 左对齐 */
			margin-left: 10px;
	      }
	      
	      /* 提交按钮 - 右下角 */
	      &.save {
	        background-color: $uni-color-success;
	        align-self: flex-end; /* 右对齐 */
				margin-left: 30px;
	      }
	    }
	  }
	}
	.check-container {
	  display: flex;
	  align-items: center;
	  margin-bottom: 6px;
	  padding-bottom: 4px;
	}
	
	.check-circle {
	  width: 26px;
	  height: 26px;
	  border-radius: 50%;
	  border: 3px solid #999;
	  margin-left: 10px;
	  margin-right: 10px;
	  transition: all 0.2s ease-in-out;
	}
	
	.check-circle.checked {
	  background-color: #48c774; /* uni 成功色 */
	  border-color: #48c774;
	}
	
	.check-label {
	  font-size: 18px;
	  color: #333;
	}

</style>
